<template>
  <view>
    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-box">
        <text class="search-icon">🔍</text>
        <input 
          class="search-input" 
          placeholder="搜索好友..." 
          :value="searchKeyword"
          @input="handleInput"
        />
      </view>
    </view>
    
    <!-- 功能按钮 -->
    <view class="action-buttons">
      <view class="action-btn" @click="$emit('add-friend')">
        <text class="action-icon">➕</text>
        <text class="action-text">添加好友</text>
      </view>
      <view class="action-btn" @click="$emit('view-requests')">
        <text class="action-icon">📨</text>
        <text class="action-text">好友请求</text>
        <view v-if="pendingRequestsCount > 0" class="badge">{{ pendingRequestsCount }}</view>
      </view>
      <view class="action-btn" @click="$emit('refresh')" :class="{ 'loading': isLoading }">
        <text class="action-icon">{{ isLoading ? '⏳' : '🔄' }}</text>
        <text class="action-text">{{ isLoading ? '刷新中...' : '刷新列表' }}</text>
      </view>
      <view class="action-btn" @click="$emit('view-chats')">
        <text class="action-icon">💬</text>
        <text class="action-text">聊天记录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SearchAndActions',
  props: {
    searchKeyword: {
      type: String,
      default: ''
    },
    pendingRequestsCount: {
      type: Number,
      default: 0
    },
    isLoading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleInput(e) {
      this.$emit('search', e.detail.value)
    }
  }
}
</script>

<style scoped>
/* 搜索栏 */
.search-section {
  padding: 20rpx;
  background: white;
  border-bottom: 1rpx solid #f0f0f0;
}

.search-box {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
}

.search-icon {
  font-size: 28rpx;
  margin-right: 12rpx;
  opacity: 0.6;
}

.search-input {
  flex: 1;
  font-size: 24rpx;
  color: #333;
}

/* 功能按钮 */
.action-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16rpx;
  padding: 20rpx;
  background: white;
  border-bottom: 1rpx solid #f0f0f0;
}

.action-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  padding: 16rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.action-btn:active {
  transform: scale(0.95);
  background: #e9ecef;
}

.action-btn.loading {
  opacity: 0.6;
  pointer-events: none;
}

.action-icon {
  font-size: 36rpx;
}

.action-text {
  font-size: 20rpx;
  color: #666;
  text-align: center;
}

.badge {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  min-width: 32rpx;
  height: 32rpx;
  background: #ff4d4f;
  color: white;
  font-size: 18rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8rpx;
  font-weight: bold;
}
</style>

